<template>
	<view class="more-modal" v-if="visible" @touchmove.stop.prevent>
		<!-- 主弹窗 -->
		<view class="modal-mask" @click="close"></view>
		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">更多功能</text>
			</view>
			<view class="modal-body">
				<view class="section">
					<text class="section-title">直播工具</text>
					<view class="tool-item" @click="handleLiveNotice">
						<text class="tool-name">直播预告</text>
						<view class="tool-right">
							<text class="tool-value">去设置</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="tool-item" @click="showQualityModal = true">
						<text class="tool-name">清晰度</text>
						<view class="tool-right">
							<text class="tool-value">{{ currentQuality.label }}</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="tool-item">
						<text class="tool-name">录屏</text>
						<view class="tool-right">
							<switch :checked="screenRecordEnabled" @change="handleScreenRecordSwitch" color="#55aaff" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 清晰度选择弹窗 -->
		<view class="quality-modal" v-if="showQualityModal">
			<view class="quality-mask" @click="showQualityModal = false"></view>
			<view class="quality-content">
				<view class="quality-header">
					<text class="quality-title">选择清晰度</text>
					<uni-icons type="closeempty" size="24" @click="showQualityModal = false"></uni-icons>
				</view>
				<view class="quality-body">
					<view class="quality-item" v-for="(item, index) in qualityOptions" :key="index"
						@click="selectQuality(index)">
						<text class="quality-name">{{ item.label }}</text>
						<uni-icons v-if="currentQuality.value === item.value" type="checkmarkempty" color="#55aaff"
							size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的预告弹窗 (底部弹出) -->
		<view class="notice-modal" v-if="showNoticeModal">
			<view class="notice-mask" @click="showNoticeModal = false"></view>
			<view class="notice-content">
				<view class="notice-header">
					<uni-icons type="arrowleft" size="24" @click="showNoticeModal = false"></uni-icons>
					<text class="notice-title">我的预告</text>
					<text class="notice-create" v-if="noticeList.length < 3" @click="showCreateModal = true">创建</text>
					<text v-else style="width: 80rpx;"></text>
				</view>
				<view class="notice-body">
					<view v-if="noticeList.length > 0" class="notice-list">
						<view class="notice-item" v-for="(item, index) in noticeList" :key="index">
							<view class="notice-info">
								<text class="notice-time">{{ item.time }}</text>
								<text class="notice-title">{{ item.title }}人已预约</text>
							</view>
							<view class="notice-actions">
								<uni-icons type="compose" size="24" color="#999" @click="editNotice(index)"
									class="action-icon"></uni-icons>
								<uni-icons type="redo" size="24" color="#999" @click="shareNotice(index)"
									class="action-icon"></uni-icons>
							</view>
						</view>
					</view>
					<view v-else class="empty-notice">
						<text class="empty-text">暂无预告，立即创建</text>
						<text class="empty-subtext">吸引粉丝提前预约，锁定直播间</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 创建预告弹窗 -->
		<notice :visible="showCreateModal" @close="showCreateModal = false" @create="handleCreateNotice" />

		<!-- 编辑预告弹窗 -->
		<view class="edit-notice-modal" v-if="showEditModal">
			<view class="edit-mask" @click="showEditModal = false"></view>
			<view class="edit-content">
				<view class="modal-header">
					<text class="modal-title">编辑直播预告</text>
					<view style="display: flex;">
						<button class="create-btn" @click="saveNotice">保存</button>
						<button class="create-btn" @click="deleteNotice" style="color: red;">删除</button>
					</view>
				</view>

				<view class="form-content">
					<!-- 开播时间 -->
					<view class="form-item" @click="openTimePicker">
						<text class="item-label">开播时间*</text>
						<view class="item-value">
							<text class="time-text" :class="{placeholder: !editingNotice.time}">
								{{ editingNotice.time || '请选择' }}
							</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>

					<!-- 预告封面 -->
					<view class="form-item">
						<text class="item-label">预告封面</text>
						<view class="cover-upload" @click="chooseCover">
							<image v-if="editingNotice.cover" :src="editingNotice.cover" class="cover-image"
								mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<text class="plus-icon">+</text>
							</view>
						</view>
					</view>

					<!-- 直播介绍 -->
					<view class="form-item">
						<text class="item-label">直播介绍</text>
						<textarea v-model="editingNotice.introduction" class="intro-textarea"
							placeholder="直播介绍可以更好的帮助观众了解您的直播内容" maxlength="100"></textarea>
						<text
							class="word-count">{{ editingNotice.introduction ? editingNotice.introduction.length : 0 }}/100</text>
					</view>
				</view>

				<!-- 时间选择器弹框 -->
				<view v-if="showTimePicker" class="time-picker-modal">
					<view class="picker-mask" @click="cancelTimePicker"></view>
					<view class="picker-content">
						<view class="picker-header">
							<text class="picker-title">选择开播时间</text>
						</view>
						<picker-view :value="pickerValue" @change="handleTimeChange" class="time-picker"
							indicator-style="height: 80rpx;">
							<picker-view-column>
								<view v-for="(item,index) in years" :key="index" class="picker-item">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in months" :key="index" class="picker-item">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in days" :key="index" class="picker-item">{{item}}日</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in hours" :key="index" class="picker-item">{{item}}时</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in minutes" :key="index" class="picker-item">{{item}}分</view>
							</picker-view-column>
						</picker-view>
						<view class="picker-buttons">
							<button class="picker-btn cancel" @click="cancelTimePicker">取消</button>
							<button class="picker-btn confirm" @click="confirmTimePicker">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import notice from '@/pages/notice/notice.vue'
	export default {
		components: {
			notice
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const now = new Date()
			const currentYear = now.getFullYear()
			const currentMonth = now.getMonth() + 1
			const currentDay = now.getDate()
			const currentHour = now.getHours()
			const currentMinute = now.getMinutes()

			return {
				screenRecordEnabled: false,
				showNoticeModal: false,
				showCreateModal: false,
				showEditModal: false,
				showQualityModal: false,
				showTimePicker: false,
				editingIndex: -1,
				qualityOptions: [{
						label: '流畅',
						value: 'ld'
					},
					{
						label: '标清',
						value: 'sd'
					},
					{
						label: '高清',
						value: 'hd'
					}
				],
				currentQuality: {
					label: '高清',
					value: 'hd'
				},
				editingNotice: {
					time: '',
					title: '',
					cover: '',
					introduction: '',
					status: '未开始'
				},
				noticeList: [{
					time: '8月10日 10:00',
					title: '0',
					cover: '/static/images/logo.png',
					introduction: '互联网健康直播，让权威医生来到你身边！实时获取专业科普、疾病预防和保健知识，在线答疑解惑。足不出户，轻松学习，便捷互动。是您获取可靠健康信息、进行初步咨询的智能新选择！',
					status: '未开始'
				}],
				// 时间选择器相关数据
				pickerValue: [5, currentMonth - 1, currentDay - 1, currentHour, currentMinute],
				years: Array.from({
					length: 11
				}, (_, i) => currentYear - 5 + i),
				months: Array.from({
					length: 12
				}, (_, i) => i + 1),
				days: Array.from({
					length: 31
				}, (_, i) => i + 1),
				hours: Array.from({
					length: 24
				}, (_, i) => i),
				minutes: Array.from({
					length: 60
				}, (_, i) => i),
				tempTime: ''
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			selectQuality(index) {
				this.currentQuality = this.qualityOptions[index]
				this.showQualityModal = false
				this.$emit('quality-change', this.currentQuality.value)
				uni.showToast({
					title: `已切换至${this.currentQuality.label}模式`,
					icon: 'none'
				})
			},
			handleScreenRecordSwitch(e) {
				this.screenRecordEnabled = e.detail.value
				this.$emit('screen-record-change', this.screenRecordEnabled)
				uni.showToast({
					title: this.screenRecordEnabled ? '录屏已开启' : '录屏已关闭',
					icon: 'none'
				})
			},
			handleLiveNotice() {
				this.showNoticeModal = true
			},
			handleCreateNotice(data) {
				this.noticeList.unshift({
					time: this.formatTime(new Date()),
					title: data.title || '0',
					cover: data.cover || '',
					introduction: data.introduction || '',
					status: '未开始'
				})
				uni.showToast({
					title: '预告创建成功',
					icon: 'success'
				})
				this.showCreateModal = false
			},
			editNotice(index) {
				this.editingIndex = index
				this.editingNotice = JSON.parse(JSON.stringify(this.noticeList[index]))
				this.showEditModal = true
			},
			shareNotice(index) {
				const notice = this.noticeList[index]
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: '直播预告：' + notice.time,
					summary: notice.introduction,
					imageUrl: notice.cover,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				})
			},
			deleteNotice() {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条直播预告吗？',
					success: (res) => {
						if (res.confirm) {
							this.noticeList.splice(this.editingIndex, 1)
							this.showEditModal = false
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			},
			saveNotice() {
				if (!this.editingNotice.time) {
					uni.showToast({
						title: '请选择开播时间',
						icon: 'none'
					})
					return
				}

				if (this.editingIndex >= 0) {
					this.noticeList.splice(this.editingIndex, 1, this.editingNotice)
				} else {
					this.noticeList.unshift(this.editingNotice)
				}

				this.showEditModal = false
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
			},
			chooseCover() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.editingNotice.cover = res.tempFilePaths[0]
					}
				})
			},
			// 时间选择器相关方法
			openTimePicker() {
				this.showTimePicker = true
				if (this.editingNotice.time) {
					try {
						// 解析已有的时间格式 "8月10日 10:00"
						const timeArr = this.editingNotice.time.match(/(\d+)/g)
						if (timeArr && timeArr.length >= 4) {
							const currentYear = new Date().getFullYear()
							this.pickerValue = [
								this.years.indexOf(currentYear) || 5,
								parseInt(timeArr[0]) - 1 || 0,
								parseInt(timeArr[1]) - 1 || 0,
								parseInt(timeArr[2]) || 0,
								parseInt(timeArr[3]) || 0
							]
						}
					} catch (e) {
						console.error('时间解析错误:', e)
					}
				}
			},
			cancelTimePicker() {
				this.showTimePicker = false
			},
			confirmTimePicker() {
				this.editingNotice.time = this.tempTime || this.formatPickerTime(this.pickerValue)
				this.showTimePicker = false
			},
			handleTimeChange(e) {
				const val = e.detail.value
				this.tempTime = this.formatPickerTime(val)
			},
			formatPickerTime(value) {
				const val = value || this.pickerValue
				return `${this.months[val[1]]}月${this.days[val[2]]}日 ${this.addZero(this.hours[val[3]])}:${this.addZero(this.minutes[val[4]])}`
			},
			addZero(num) {
				return num < 10 ? `0${num}` : num
			},
			formatTime(date) {
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hours = date.getHours()
				const minutes = date.getMinutes()
				return `${month}月${day}日 ${hours}:${minutes < 10 ? '0' + minutes : minutes}`
			}
		}
	}
</script>

<style lang="scss">
	.more-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;

		.modal-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			box-sizing: border-box;
			animation: slide-up 0.3s ease;
		}

		.modal-header {
			text-align: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.modal-body {
			padding-top: 20rpx;
		}

		.section {
			margin-bottom: 30rpx;

			.section-title {
				font-size: 28rpx;
				color: #999;
				padding: 10rpx 0;
			}

			.tool-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.tool-name {
					font-size: 30rpx;
					color: #333;
				}

				.tool-right {
					display: flex;
					align-items: center;

					.tool-value {
						font-size: 28rpx;
						color: #999;
						margin-right: 10rpx;
					}

					switch {
						transform: scale(0.8);
						transform-origin: right center;
					}
				}

				&:active {
					background-color: #f5f5f5;
				}
			}
		}

		.quality-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1000;

			.quality-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.quality-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				animation: slide-up 0.3s ease;
			}

			.quality-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.quality-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.quality-body {
				padding: 20rpx 30rpx;

				.quality-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 25rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					.quality-name {
						font-size: 30rpx;
						color: #333;
					}

					&:active {
						background-color: #f5f5f5;
					}
				}
			}
		}

		.notice-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1001;

			.notice-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.notice-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				animation: slide-up 0.3s ease;
			}

			.notice-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.notice-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.notice-create {
					color: #55aaff;
					font-size: 28rpx;
				}
			}

			.notice-body {
				padding: 30rpx;
				max-height: 60vh;
				overflow-y: auto;

				.empty-notice {
					text-align: center;
					padding: 60rpx 0;

					.empty-text {
						display: block;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 10rpx;
					}

					.empty-subtext {
						display: block;
						font-size: 24rpx;
						color: #999;
					}
				}

				.notice-list {
					.notice-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 25rpx 0;
						border-bottom: 1rpx solid #f5f5f5;

						.notice-info {
							flex: 1;

							.notice-time {
								font-size: 28rpx;
								color: #333;
								display: block;
								margin-bottom: 8rpx;
							}

							.notice-title {
								font-size: 24rpx;
								color: #999;
							}
						}

						.notice-actions {
							display: flex;

							.action-icon {
								margin-left: 30rpx;
							}
						}
					}
				}
			}
		}

		.edit-notice-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1002;

			.edit-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.edit-content {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				max-height: 80vh;
				overflow-y: auto;

				.modal-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #f0f0f0;

					.modal-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333;
					}

					.create-btn {
						background: none;
						border: none;
						color: #55aaff;
						font-size: 32rpx;
						padding: 0;
						margin: 0;
						line-height: 1;
						margin-left: 20rpx;

						&::after {
							border: none;
						}
					}
				}

				.form-content {
					padding: 30rpx;
				}

				.form-item {
					margin-bottom: 40rpx;

					.item-label {
						display: block;
						font-size: 30rpx;
						color: #333;
						margin-bottom: 20rpx;
						font-weight: 500;
					}

					.item-value {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #f0f0f0;

						.time-text {
							font-size: 28rpx;
							color: #333;

							&.placeholder {
								color: #999;
							}
						}
					}

					.cover-upload {
						width: 200rpx;
						height: 200rpx;
						background-color: #f7f7f7;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cover-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.upload-placeholder {
							text-align: center;

							.plus-icon {
								font-size: 60rpx;
								color: #ccc;
								line-height: 1;
							}
						}
					}

					.intro-textarea {
						width: 100%;
						height: 200rpx;
						background-color: #f7f7f7;
						border-radius: 8rpx;
						padding: 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #333;
					}

					.word-count {
						display: block;
						text-align: right;
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}

			/* 时间选择器样式 */
			.time-picker-modal {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1003;

				.picker-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.5);
				}

				.picker-content {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					background-color: #fff;
					border-radius: 24rpx 24rpx 0 0;
					padding: 20rpx;
				}

				.picker-header {
					text-align: center;
					padding: 20rpx 0;

					.picker-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
				}

				.time-picker {
					height: 400rpx;
				}

				.picker-item {
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					color: #333;
				}

				.picker-buttons {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.picker-btn {
						flex: 1;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						background: none;
						border: none;
						padding: 0;
						margin: 0;

						&::after {
							border: none;
						}

						&.cancel {
							color: #999;
						}

						&.confirm {
							color: #55aaff;
						}
					}
				}
			}
		}

		@keyframes slide-up {
			from {
				transform: translateY(100%);
			}

			to {
				transform: translateY(0);
			}
		}
	}
</style>